<template>
	<view class="content">
		<view class="content_top">
			<view class="uni-padding-wrap uni-common-mt">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view :class="[item.type == chooseType ? 'type_card_choose' : '' ,item.class]" class="type_card scroll-view-item_H" v-for="(item,index) in  msgType"  @click="changeType(item.type)">
						<span>{{item.name}}</span>
						<image style="width: 40px;height: 40px;" :src="item.png" mode="aspectFit"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="content_bottom">
			<view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="scroll-view-item" v-for="(item,index) in msgList" @click="chooseMsg(item)">
					
					<!-- <navigator :url="'/pages/chat/index'"> -->
						<view class="content_msg content_msg_love" v-if="item.type == 1">
							<image style="width: 40px;height: 40px;" src="../../static/index/love.png" mode="aspectFit"></image>
							<span class="content_title">{{item.title}}</span>
							<span class="content_text">{{item.content}}</span>
						<!-- 	<span class="content_difficulty">
								<span v-for="(start,subIndex) in  item.difficulty">
									<image style="width: 15px;height: 15px;" src="../../static/index/start1.png" mode="aspectFit"></image>
								</span>
								
							</span> -->
						</view>
						
						<!-- </navigator>	 -->
						<view class="content_msg content_msg_family" v-if="item.type == 2">
							<image style="width: 40px;height: 40px;" src="../../static/index/family.png" mode="aspectFit"></image>
							<span class="content_title">{{item.title}}</span>
							<span class="content_text">{{item.content}}</span>
						</view>
						<view class="content_msg content_msg_job" v-if="item.type == 3">
							<image style="width: 40px;height: 40px;" src="../../static/index/job.png" mode="aspectFit"></image>
							<span class="content_title">{{item.title}}</span>
							<span class="content_text">{{item.content}}</span>
						<!-- 	<span class="content_difficulty">
								<span v-for="(start,subIndex) in  item.difficulty">
									<image style="width: 15px;height: 15px;" src="../../static/index/start1.png" mode="aspectFit"></image>
								</span>
								
							</span> -->
						</view>
						<view class="content_msg content_msg_amazing" v-if="item.type == 4">
							<image style="width: 40px;height: 40px;" src="../../static/index/amazing.png" mode="aspectFit"></image>
							<span class="content_title">{{item.title}}</span>
							<span class="content_text">{{item.content}}</span>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				chooseType:0,
				msgType:[
					{
						name:'情侣',
						type:1,
						png:'../../static/index/love.png',
						class:'type_card_love',
					},{
						name:'家庭',
						type:2,
						png:'../../static/index/family.png',
						class:'type_card_family',
					},{
						name:'职场',
						type:3,
						png:'../../static/index/job.png',
						class:'type_card_job',
					},{
						name:'奇奇怪怪',
						type:1,
						png:'../../static/index/amazing.png',
						class:'type_card_amazing',
					},
				],
				msgList:[],
				cardData:[
					{
						title:'居然挂我电话',
						content:'半夜你睡得模模糊糊，接到女友电话阿巴巴巴巴巴巴半夜你睡得模模糊糊，接到女友电话阿巴巴巴巴巴巴',
						id:1,
						num:112,
						state:false,
						difficulty:3,
						type:1,
					},{
						title:'按摩？',
						content:'你因为连续上班太累了，去做了一次按摩，没有告诉女朋友，你因为连续上班太累了，去做了一次按摩，没有告诉女朋友',
						id:1,
						num:112,
						state:false,
						difficulty:4,
						type:3,
					},{
						title:'你变卦了',
						content:'你和女朋友约好下午出门散步，但是你突然想打游戏，你和女朋友约好下午出门散步，但是你突然想打游戏',
						id:1,
						num:112,
						state:false,
						difficulty:3,
						type:4,
					},{
						title:'约会迟到',
						content:'因为工作繁忙导致约会迟到，女友非常不满，因为工作繁忙导致约会迟到，女友非常不满',
						id:1,
						num:112,
						state:false,
						difficulty:2,
						type:2,
					},{
						title:'忘记纪念日',
						content:'你忘记了俩人在一起的纪念日，女友非常生气，你忘记了俩人在一起的纪念日，女友非常生气',
						id:1,
						num:112,
						state:false,
						difficulty:4,
						type:1,
					},{
						title:'晚归',
						content:'那天你和朋友出去玩，手机没电，凌晨一点才回家，那天你和朋友出去玩，手机没电，凌晨一点才回家，接到女友电话阿巴巴巴巴巴巴',
						id:1,
						num:112,
						state:false,
						difficulty:2,
						type:1,
					},
				]
			}
		},
		onLoad() {
			this.msgList = this.cardData
			console.log('onload')
		},
		methods: {
			//横向滚动
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			//分类
			changeType: function(type) {
				this.chooseType != type ? this.chooseType = type : this.chooseType = 0
				let _arr = []
				if(this.chooseType !== 0){
	
					_arr = this.cardData.filter(item => item.type == type)
					this.msgList = _arr
				}else{
					this.msgList = this.cardData
				}
				console.log(this.cardData,_arr,type, typeof type)
			},
			chooseMsg: function(e) {
				console.log(e)
				uni.reLaunch({
					url: '/pages/chat/index'
				});
			}
		}
	}
</script>

<style>
	.content {
		height: 100%;
		width: 100%;
		display: flex;	
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-image: url('../../static/index/home-bg.jpeg');
		background-repeat: repeat-y;
	}
	.content_top{
		height: 230rpx;
		width: 100%;
		margin-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	uni-page-body{
		height: 100%;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 230rpx;
	}
	.scroll-view-item_H {
		display: flex;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		text-align: center;
		font-size: 36rpx;
	}
	.type_card{
		height: 220rpx;
		width: 180rpx;
		line-height: 180rpx;
		text-align: center;
		/* border: 1px solid red; */
		margin-right: 30rpx;
		font-size: 40rpx;
		font-family: 'Courier New', Courier, monospace;
		font-weight: 500; 
		border-radius: 40rpx;
		opacity: 0.7;
	}
	.type_card_choose{
		height: 240rpx;
		width: 200rpx;
		line-height: 200rpx;
		text-align: center;
		opacity: 1;
	}
	.type_card uni-image{
		position: absolute;
		top: 140rpx;
	}
	.type_card_love{
		color: #FE636A;
		background-color: #FDE7E0;
	}
	.type_card_family{
		background-color: #D3F6D8;
		color: #7EBD58;
	}
	.type_card_job{
		background-color: #DDEBFE;
		color: #5FA8E1;
	}
	.type_card_amazing{
		color: #7165B0;
		background-color: #DBDCFF;
	}
	.content_bottom{
		background-color: #f0f8ff87;
		/* opacity: 0.5; */
		height: auto;
		height: calc(100% - 200rpx);
		margin-top: 30rpx;
		border-radius: 50rpx;
		width: 100%;
	}
	.scroll-view-item {
		height: auto;
		max-height: 300rpx;
		/* line-height: 300rpx; */
		text-align: center;
		/* font-size: 36rpx; */
		width: calc(100% - 60rpx);
		float: left;
		/* padding: 20rpx; */
		background-color: #f9f9f97a;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		border-radius: 40rpx;
		border:1px solid #e4dede94;
		box-shadow: 2px 3px 3px #cac9c9cc;
	}
	.scroll-view-item:nth-child(odd){
		margin-right: 30rpx;
	}
	.scroll-Y{
		padding-left: 30rpx;
		background-image: url('../../static/index/home-bg.jpeg');
		background-repeat: repeat-y;
	}
		
	.content_msg{
		height: 100%;
		width: calc(100% - 60rpx)%;
		padding: 30rpx;
	}
	.content_msg_love{
		background-color: #ebe1de45;
	}
	.content_msg_job{
		background-color: #ddebfe75;
	}
	.content_msg_family{
		background-color: #d4f7d94a;
	}
	.content_msg_amazing{
		background-color: #dfe0ff75;
	}
	.content_msg .content_title{
		color: black;
		font-size: 38rpx;
		font-weight: 600;
		font-family: Arial, Helvetica, sans-serif;
		display: inline-block;
		text-align: left;
		width: 100%;
		margin-top: 20rpx;
	}
	.content_msg .content_text{
		width: 100%;
		display: -webkit-box;
		color: #645c5c9c;
		margin-top: 10rpx;
		height: auto;
		max-height: 100rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow-x: hidden;
		overflow-y: hidden;
		text-align: left;
	}
	.content_msg uni-image{
		position: absolute;
		right: 60rpx;
		opacity: 0.7;
		margin-top: -30rpx;
	}
	.content_difficulty{
		display: inline-block;
		width: 100%;
		text-align: left;
		margin-top: 20rpx;
	}
	.content_difficulty uni-image{
		position: relative;
		right: auto;
		
	}
</style>
